<template>
    <view>
        <view class="menu">
            <view :class="type == '1' ? 'menu01' : 'menu02'" @tap="changetype" id="1"><text>包厢资料</text></view>
            <view :class="type == '2' ? 'menu01' : 'menu02'" @tap="changetype" id="2"><text>包厢图片</text></view>
            <view :class="type == '3' ? 'menu01' : 'menu02'" @tap="changetype" id="3"><text>包厢价格</text></view>
        </view>
        <view class="g1"></view>
        <block v-if="type == '1'">
            <view class="kk1">
                <view class="bxxx1">
                    <view>包厢名称</view>
                    <view>
                        <input v-model="baojian.name" class="input_md" type="text" placeholder="请输入包厢名称" />
                    </view>
                </view>

                <view class="bxxx1">
                    <view>显示顺序</view>
                    <view>
                        <input v-model="baojian.sort" class="input_md" type="number" placeholder="请输入显示顺序" />
                    </view>
                </view>

                <view class="bxxx1">
                    <view>容纳人数</view>
                    <view>
                        <input v-model="baojian.peoplenum" class="input_md" type="text" placeholder="请输入容纳人数" />
                    </view>
                </view>
            </view>

            <view class="kk1">
                <view class="bxxx2">
                    <view>包厢说明</view>
                    <view class="kk2">
                        <input class="input_md" type="text" placeholder="请输入包厢说明" />
                        <image class="qingchu" src="/static/img/x.png"></image>
                    </view>
                </view>

                <view class="bxxx2">
                    <view>包厢详情介绍</view>
                    <view class="kk2">
                        <input class="input_md" type="text" placeholder="请输入包厢详情介绍" />
                        <image class="qingchu" src="/static/img/x.png"></image>
                    </view>
                </view>
            </view>

            <view class="baocun">
                <view>保存</view>
            </view>
        </block>

        <block v-if="type == '2'">
            <view class="tp_kk">
                <view class="kk5">
                    <view>列表图片</view>
                    <view class="kk5_text">建议尺寸：166px*166px;比例：1:1</view>
                </view>

                <view class="kk6" @click="uploadlistimg">
                    <view><image class="xiangji" src="/static/img/相机1.png"></image></view>
                    <view class="kk6_text">上传图片</view>
                </view>
            </view>

            <view class="tp_kk">
                <view class="kk5">
                    <view>详情图片</view>
                    <view class="kk5_text">建议尺寸：800px*400px;比例：2:1</view>
                </view>

                <view class="kk6">
                    <view><image class="xiangji" src="/static/img/相机1.png"></image></view>
                    <view class="kk6_text">上传图片</view>
                </view>
            </view>

            <view class="shanchu">
                <view>删除</view>
            </view>
            <view class="baocun">
                <view>保存</view>
            </view>
        </block>

        <block v-if="type == '3'">
            <view class="kk3">
                <view style="margin-bottom: 40rpx">按小时收费</view>

                <view>
                    <view class="kk4">
                        <view>原价</view>
                        <view>
                            <input class="input_md" type="text" placeholder="请输入包厢原价" />
                        </view>
                    </view>

                    <view class="kk4">
                        <view>活动价</view>
                        <view>
                            <input class="input_md1" type="text" placeholder="客户实际支付价格" />
                        </view>
                    </view>

                    <view class="kk4">
                        <view>会员价</view>
                        <view>
                            <input class="input_md2" type="text" placeholder="为空则不使用该会员价" />
                        </view>
                    </view>

                    <view class="kk4">
                        <view>起订时长</view>
                        <view class="kk4_text">请选择起订时长</view>
                    </view>
                </view>
                <view class="grid-container">
                    <view class="grid-item" v-for="(qdsj, index) in qidingshijian" :key="index">
                        <view>
                            <view>{{ qdsj.sj }}点</view>
                            <view class="qdsj_h2">
                                <view class="qdsj_h3"><input type="text" :placeholder="qdsj.jiage" /></view>
                                <view class="qdsj_h4"><view>元</view></view>
                            </view>
                        </view>
                    </view>
                </view>

                <view>
                    <view class="kk4">
                        <view>按包时段收费</view>
                        <view>新增包时段</view>
                    </view>

                    <view class="kk8">
                        <view class="kk9">
                            <view>名称</view>
                            <view class="kk10">
                                <view><input type="text" class="kk9_text" placeholder="3小时" /></view>
                            </view>
                            <view class="kk10">
                                <view><input type="text" class="kk9_text" placeholder="5小时" /></view>
                            </view>
                        </view>

                        <view class="kk9">
                            <view>时长</view>
                            <view class="kk10">
                                <view><input type="text" class="kk9_text" placeholder="3" /></view>
                            </view>
                            <view class="kk10">
                                <view><input type="text" class="kk9_text" placeholder="5" /></view>
                            </view>
                        </view>

                        <view class="kk9">
                            <view>原价</view>
                            <view class="kk10">
                                <view><input type="text" class="kk9_text" placeholder="100" /></view>
                            </view>
                            <view class="kk10">
                                <view><input type="text" class="kk9_text" placeholder="150" /></view>
                            </view>
                        </view>

                        <view class="kk9">
                            <view>折扣后价格</view>

                            <view class="kk10">
                                <view><input type="text" class="kk9_text" placeholder="82" /></view>
                            </view>
                            <view class="kk10">
                                <view><input type="text" class="kk9_text" placeholder="128" /></view>
                            </view>
                        </view>

                        <view class="kk9">
                            <view>操作</view>
                            <view class="kk10"><image class="yuanzhu" src="/static/img/圆柱.png"></image></view>
                            <view class="kk10"><image class="yuanzhu" src="/static/img/圆柱.png"></image></view>
                        </view>
                    </view>
                </view>
            </view>
            <view class="baocun">
                <view>保存</view>
            </view>
            <view class="g5"></view>
        </block>
    </view>
</template>

<script>
// pages/baoxiangguanli/baoxiangguanli.js
import {baojianaddedit, uploadfile} from "@/common/api.js"
const {domain, acid, version_number} = require('@/common/config.js');
var app = getApp();
export default {
    data() {
        return {
            type: '1',
			baojian: {
				name: '',
				address: '',
				sort: 0,
				peoplenum: 0
			},

            qidingshijian: [
                {
                    sj: '00-01',
                    jiage: '32'
                },
                {
                    sj: '01-02',
                    jiage: '32'
                },
                {
                    sj: '02-03',
                    jiage: '32'
                },
                {
                    sj: '03-04',
                    jiage: '32'
                },
                {
                    sj: '04-05',
                    jiage: '32'
                },
                {
                    sj: '05-06',
                    jiage: '32'
                },
                {
                    sj: '06-07',
                    jiage: '32'
                },
                {
                    sj: '07-08',
                    jiage: '32'
                },
                {
                    sj: '08-09',
                    jiage: '32'
                },
                {
                    sj: '09-10',
                    jiage: '32'
                },
                {
                    sj: '10-11',
                    jiage: '32'
                },
                {
                    sj: '11-12',
                    jiage: '32'
                },
                {
                    sj: '12-13',
                    jiage: '32'
                },
                {
                    sj: '13-14',
                    jiage: '32'
                },
                {
                    sj: '14-15',
                    jiage: '32'
                },
                {
                    sj: '15-16',
                    jiage: '32'
                },
                {
                    sj: '16-17',
                    jiage: '32'
                },
                {
                    sj: '17-18',
                    jiage: '32'
                },
                {
                    sj: '18-19',
                    jiage: '32'
                },
                {
                    sj: '19-20',
                    jiage: '32'
                },
                {
                    sj: '20-21',
                    jiage: '32'
                },
                {
                    sj: '21-22',
                    jiage: '32'
                },
                {
                    sj: '22-23',
                    jiage: '32'
                },
                {
                    sj: '23-24',
                    jiage: '32'
                }
            ],

            qdsj: {
                sj: '',
                jiage: ''
            },
			listimg: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        changetype: function (option) {
            var that = this;
            var type = option.currentTarget.id;
            that.setData({
                type: type
            });
            uni.showLoading({
                title: '加载中...'
            });
            uni.hideLoading();
        },
		opbaojianaddedit(){
			const param = {}
			baojianaddedit(param, (res => {
				
			}))
		},
		uploadlistimg(){
			uni.chooseImage({
				count: 1, // 默认9，设置图片的选择数量
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: (chooseImageRes) => {
				  const tempFilePaths = chooseImageRes.tempFilePaths;
				  const uploadTask = uni.uploadFile({
					url: domain + '/index?s=/admin/attachment/upload', // 服务器上传接口地址
					filePath: tempFilePaths[0],
					name: 'file', // 必须填写，为了后端接收文件流的参数名字
					formData: {
					  'file': 'file' // 其他要上传的参数
					},
					success: (uploadFileRes) => {
					  console.log('upload success:', uploadFileRes);
					},
					fail: (uploadFileErr) => {
					  console.error('upload fail:', uploadFileErr);
					}
				  });
				  
				  // 监听上传进度变化
				  uploadTask.onProgressUpdate((res) => {
					console.log('上传进度' + res.progress + '%');
				  });
				},
				fail: (chooseImageErr) => {
				  console.error('choose image fail:', chooseImageErr);
				}
			})
		}
    }
};
</script>
<style>
.menu {
    width: 100%;
    height: auto;
    overflow: hidden;
    top: 0;
}
.menu01 {
    width: 25%;
    line-height: 90rpx;
    font-size: 32rpx;
    text-align: center;
    float: left;
    color: #ff4800;
    border-bottom: 2px solid #ff4800;
}
.menu02 {
    width: 25%;
    line-height: 90rpx;
    font-size: 32rpx;
    text-align: center;
    float: left;
    color: #666666;
}

.kk1 {
    margin: 30rpx;
    padding-top: 10rpx;
    color: rgb(129, 128, 128);
}

.bxxx1 {
    display: flex;
    justify-content: space-between;
    height: 100rpx;
}
.input_md {
    width: 250rpx;
}
.input_md1 {
    width: 280rpx;
}
.input_md2 {
    width: 340rpx;
}

.kk2 {
    display: flex;
    justify-content: space-between;
}

.kk3 {
    margin: 30rpx;
}

.kk4 {
    display: flex;
    justify-content: space-between;
    height: 60rpx;
}
.kk4_text {
    color: rgb(121, 120, 120);
    margin-right: 20rpx;
}

.kk8 {
    display: flex;
}
.kk9 {
    margin-right: 45rpx;
}
.kk10 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10rpx;
}
.bxxx2 {
    height: 130rpx;
}

.yuanzhu {
    width: 40rpx;
    height: 40rpx;
    margin-top: 5rpx;
}
.kk9_text {
    width: 80rpx;
    height: 40rpx;
}

.qdsj {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    justify-content: space-around;
}

.qdsj_kk {
    background-color: aqua;
    width: calc(25% - 10px);
    border: 2rpx solid rgb(202, 199, 199);
    margin-bottom: 10rpx;
}

.qdsj_h2 {
    display: flex;
    border-top: 2rpx solid rgb(202, 199, 199);
}

.qdsj_h3 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 40rpx 0 20rpx;
    width: 80rpx;
}
.qdsj_h4 {
    background-color: rgb(194, 189, 189);
    width: 60rpx;
    font-size: 25rpx;
    display: flex;
    justify-content: center;
    align-items: center;
}

.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0rpx;
}

.grid-item {
    width: calc(25% - 20rpx); /* 计算宽度，三列布局 */
    margin-bottom: 20rpx; /* 设置下方间距 */
    background-color: rgb(255, 255, 255); /* 背景颜色 */
    text-align: center; /* 文本居中 */
    border: 2rpx solid rgb(202, 199, 199);
}
</style>
